<!-- 交易趋势 -->
<template>
    <view>
        <status-bar title='交易趋势' :goHome='fromShare'></status-bar>
        <view class="padding30">
            <view class="card bgwhite bor_radius_6 padding20">
                <view class="size30 color_22 bold">24小时交易趋势</view>
                <column :raw-data="pageData.day_money_chart" :item-count="8"></column>
                <view class="flexac m-top30 m-bot30">
                    <u-tabs :list="tabList" :lineColor="color" lineWidth="45" :activeStyle="{color:'#222', fontWeight:'bold'}" @click="tabClick($event, 'day')"></u-tabs>
                </view>
                <ring :raw-data="day ? pageData.day_money_area_pie : pageData.day_money_cate_pie"></ring>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 m-top50">
                <view class="size30 color_22 bold">月交易趋势</view>
                <column :raw-data="pageData.month_money_chart" :item-count="6"></column>
                <view class="flexac m-top30 m-bot30">
                    <u-tabs :list="tabList" :lineColor="color" lineWidth="45" :activeStyle="{color:'#222', fontWeight:'bold'}" @click="tabClick($event, 'month')"></u-tabs>
                </view>
                <ring :raw-data="month ? pageData.month_money_area_pie : pageData.month_money_cate_pie"></ring>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 m-top50">
                <view class="size30 color_22 bold">年交易趋势</view>
                <column :raw-data="pageData.year_money_chart"></column>
                <view class="flexac m-top30 m-bot30">
                    <u-tabs :list="tabList" :lineColor="color" lineWidth="45" :activeStyle="{color:'#222', fontWeight:'bold'}" @click="tabClick($event, 'year')"></u-tabs>
                </view>
                <ring :raw-data="year ? pageData.year_money_area_pie : pageData.year_money_cate_pie"></ring>
            </view>
        </view>
    </view>
</template>

<script>
import column from '../components/column.vue'
import ring from '../components/ring.vue'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            tabList: [
                { name: '品类交易比' },
                { name: '地区交易比' }
            ],
            pageData: '',
            day: 0, // 0是品类、1是地区
            month: 0,
            year: 0
        }
    },
    computed: {
        ...mapState(['color'])
    },
    components: {
        column,
        ring
    },
    onLoad(){
        this.$http.get({
            url: '/PrivateSphereApi/saleTrend'
        }).then(res=>{
            if(res.code != 200) return this.$Toast(res.msg)
            this.pageData = res.data
        })
    },
    methods: {
        tabClick({index}, type){
            console.log(index, type)
            this[type] = index
        }
    }
}
</script>

<style lang="scss" scoped>
.card {  
    box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
}
</style>